<template>
<div class="wrapper">
    <div v-if="web" class="header">
        <text class="header-text">上海卓顾信息科技有限公司</text>
        <div class="back-area" @click="back">
            <image class="back" :src="getUrl('image/back.png')"/>
        </div>
    </div>

    <scroller class="main" v-if="chartOrform" :show-scrollbar="false">
        <div class="chart">
            <web style="width: 750px; height: 500px" :src="getUrl('chart/chart_balanceSheet.html')"></web>
            <text class="chart_text">资产 = 负债 + 所有者权益</text>
        </div>
        <div v-for="(item,index) in chartList" :key="index" style="background-color:#ffffff">
            <div class='asset_items' @click="openChild(index)">
                <text class="asset">{{item.asset}}</text>
                <text class='balance'>{{item.balance}}</text>
                <div class="arrowDiv">
                    <image v-if="item.lock" class='open_arrow' :src="getUrl('image/open_arrow.png')"/>
                    <image v-else class='open_arrow' :src="getUrl('image/close_arrow.png')"/>
                </div>
            </div>   
            <div class='asset_items asset_items_child' v-if="item.lock" v-for="(child,i) in item.items" :key="i">
                <text class="asset">{{child.asset}}</text>
                <text class='balance'>{{child.balance}}</text>
                <div class='arrowDiv'>
                    <image class='open_arrow' :src="getUrl('image/enter.png')"/>
                </div>
            </div>
        </div>
    </scroller>

    <scroller class="main" v-if="!chartOrform" :show-scrollbar="false">
        <div class='title'>
            <text class="titleText">资产负债表</text>
            <text class='button'>下载</text>
        </div>
        <!-- 流动资产 -->
        <div class='item item-h1'>
            <text class="item-h1-text">流动资产：</text>
        </div>
        <div class='group' v-for='(item,index) in currentAssets' :key='index'>
            <div class='item item-title'>
                <div class="row">{{item.assetRow}}.{{item.asset}}</div>
            </div>
            <div class='item'>
                <div class="row">期末余额：</div> 
                <text :class="['rightBold','num',item.endBalance < 0 ? 'red' : '']">{{item.endBalance}}</text>
            </div>
            <div class='item'> 
                <div class="row">年初余额：</div> 
                <text :class="['rightBold','num',item.initBalance < 0 ? 'red' : '']">{{item.initBalance}}</text>
            </div>
        </div>

        <!-- 非流动资产 -->
        <div class='item item-h1'>
            <text class="item-h1-text">非流动资产：</text>
        </div>
        <div class='group' v-for='item in nonCurrentAssets' :key='item.asset'>
            <div class='item item-title'>
                <div class="row">{{item.assetRow}}.{{item.asset}}</div>
            </div>
            <div class='item'>
                <div class="row">期末余额：</div> 
                <text :class="['rightBold','num',item.endBalance < 0 ? 'red' : '']">{{item.endBalance}}</text>
            </div>
            <div class='item'> 
                <div class="row">年初余额：</div> 
                <text :class="['rightBold','num',item.initBalance < 0 ? 'red' : '']">{{item.initBalance}}</text>
            </div>
        </div>

        <!-- 流动负债 -->
        <div class='item item-h1'>
            <text class="item-h1-text">流动负债：</text>
        </div>
        <div class='group' v-for='item in currentLiabilities' :key='item.asset'>
            <div class='item item-title'>
                <div class="row">{{item.assetRow}}.{{item.asset}}</div>
            </div>
            <div class='item'>
                <div class="row">期末余额：</div> 
                <text :class="['rightBold','num',item.endBalance < 0 ? 'red' : '']">{{item.endBalance}}</text>
            </div>
            <div class='item'> 
                <div class="row">年初余额：</div> 
                <text :class="['rightBold','num',item.initBalance < 0 ? 'red' : '']">{{item.initBalance}}</text>
            </div>
        </div>

        <!-- 非流动负债 -->
        <div class='item item-h1'>
            <text class="item-h1-text">非流动负债：</text>
        </div>
        <div class='group' v-for='item in nonCurrentLiabilities' :key='item.asset'>
            <div class='item item-title'>
                <div class="row">{{item.assetRow}}.{{item.asset}}</div>
            </div>
            <div class='item'>
                <div class="row">期末余额：</div> 
                <text :class="['rightBold','num',item.endBalance < 0 ? 'red' : '']">{{item.endBalance}}</text>
            </div>
            <div class='item'> 
                <div class="row">年初余额：</div> 
                <text :class="['rightBold','num',item.initBalance < 0 ? 'red' : '']">{{item.initBalance}}</text>
            </div>
        </div>

        <!-- 所有者权益（或股东权益） -->
        <div class='item item-h1'>
            <text class="item-h1-text">所有者权益（或股东权益）：</text>
        </div>
        <div class='group' v-for='item in ownerasset' :key='item.asset'>
            <div class='item item-title'>
                <div class="row">{{item.assetRow}}.{{item.asset}}</div>
            </div>
            <div class='item'>
                <div class="row">期末余额：</div> 
                <text :class="['rightBold','num',item.endBalance < 0 ? 'red' : '']">{{item.endBalance}}</text>
            </div>
            <div class='item'> 
                <div class="row">年初余额：</div> 
                <text :class="['rightBold','num',item.initBalance < 0 ? 'red' : '']">{{item.initBalance}}</text>
            </div>
        </div>
    </scroller>

    <div class='fixed_button' @click="swich">
        <image v-if="chartOrform" class='fixed_img' :src="getUrl('image/form.png')"/>
        <image v-else class='fixed_img' :src="getUrl('image/chart.png')"/>
        <text class='fixed_text'>{{fixedText}}</text>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            web: false,
            chartOrform:true,
            fixedText:'列表',
            chartList:[{
                asset:'货币资金',
                balance: '224470',
                lock: false,
                items:[
                { asset: '库存现金', balance: '5220'},
                { asset: '银行存款', balance: '219250' },
                { asset: '其他货币资金', balance: '0' }
                ]
            },{
                asset: '应收账款',
                balance: '224470',
                lock: false,
                items: [
                { asset: '应收账款', balance: '5220' },
                { asset: '预收账款', balance: '219250' }
                ]
            }, {
                asset: '预付账款',
                balance: '224470',
                lock: false,
                items: [
                { asset: '预付账款', balance: '5220' },
                { asset: '应付账款', balance: '219250' }
                ]
            },{
                asset: '存货',
                balance: '224470',
                lock: false,
                items: [
                { asset: '材料采购', balance: '5220' },
                { asset: '在途物资', balance: '219250' },
                { asset: '原材料', balance: '219250' },
                { asset: '材料成本差异', balance: '219250' },
                { asset: '在途物资', balance: '219250' },
                { asset: '在途物资', balance: '219250' },
                ]
            }, {
                asset: '固定资产',
                balance: '224470',
                lock: false,
                items: [
                { asset: '固定资产', balance: '5220' },
                { asset: '累计折旧', balance: '219250' }
                ]
            }, {
                asset: '其余资产',
                balance: '224470',
                lock: false
            }, {
                asset: '应付账款',
                balance: '224470',
                lock: false,
                items: [
                { asset: '预付账款', balance: '5220' },
                { asset: '应付账款', balance: '219250' }
                ]
            }],
            currentAssets: [{
                "asset": "货币资金",
                "assetRow": "1",
                "endBalance": "164863",
                "initBalance": "5521",
                "id": "1",
                "assetText": "科目：库存现金+银行存款+其他货币资金"
                }, {
                "asset": "短期投资",
                "assetRow": "2",
                "endBalance": "15516",
                "initBalance": "6244",
                "id": "2",
                "assetText": "科目：短期投资"
                }, {
                "asset": "应收票据",
                "assetRow": "3",
                "endBalance": "486",
                "initBalance": "855",
                "id": "3",
                "assetText": "科目：应收票据"
                }, {
                "asset": "应收账款",
                "assetRow": "4",
                "endBalance": "45646",
                "initBalance": "15",
                "id": "4",
                "assetText": "科目：应收账款+预收账款"
                }, {
                "asset": "预付账款",
                "assetRow": "5",
                "endBalance": "430",
                "initBalance": "60",
                "id": "5",
                "assetText": "科目：预付账款+应付账款"
                }, {
                "asset": "应收股利",
                "assetRow": "6",
                "endBalance": "66",
                "initBalance": "526",
                "id": "6",
                "assetText": "科目：应收股利"
                }, {
                "asset": "应收利息",
                "assetRow": "7",
                "endBalance": "1665",
                "initBalance": "321",
                "id": "7",
                "assetText": "科目：应收利息"
                }, {
                "asset": "其他应收款",
                "assetRow": "8",
                "endBalance": "-4966",
                "initBalance": "-626",
                "id": "8",
                "assetText": "科目：其他应收款"
                }, {
                "asset": "存货",
                "assetRow": "9",
                "endBalance": "-46",
                "initBalance": "6",
                "id": "9",
                "assetText": "科目：材料采购+在途物资+原材料+材料成本差异+库存商品-商品进销差价+委assetText资产+生产成本+制造费用+工程施工+机械作业"
                }, {
                "asset": "其中：原材料",
                "assetRow": "10",
                "endBalance": "-9556",
                "initBalance": "2566",
                "id": "10",
                "assetText": "科目：原材料"
                }, {
                "asset": "在产品",
                "assetRow": "11",
                "endBalance": "65662",
                "initBalance": "66",
                "id": "11",
                "assetText": "科目：生产成本+制造费用+工程施工+机械作业"
                }, {
                "asset": "库存商品",
                "assetRow": "12",
                "endBalance": "5995",
                "initBalance": "-65",
                "id": "12",
                "assetText": "科目：库存商品"
                }, {
                "asset": "周转材料",
                "assetRow": "13",
                "endBalance": "-456",
                "initBalance": "965",
                "id": "13",
                "assetText": "科目：周转材料"
                }, {
                "asset": "其他流动资产",
                "assetRow": "14",
                "endBalance": "46",
                "initBalance": "56",
                "id": "14",
                "assetText": "科目：待处理流动资产损益"
                }, {
                "asset": "流动资产合计",
                "assetRow": "15",
                "endBalance": "466",
                "initBalance": "65",
                "id": "15",
                "assetText": "行次：行1+行2+行3+行4+行5+行6+行7+行8+行9+行14"
            }],
            nonCurrentAssets: [{
                "asset": "长期债券投资",
                "assetRow": "1",
                "endBalance": "0",
                "initBalance": "0",
                "id": "1",
                "assetText": "科目：长期债券投资"
                }, {
                "asset": "长期股权投资",
                "assetRow": "2",
                "endBalance": "0",
                "initBalance": "0",
                "id": "2",
                "assetText": "科目：长期股权投资"
                }, {
                "asset": "固定资产原价",
                "assetRow": "3",
                "endBalance": "0",
                "initBalance": "0",
                "id": "3",
                "assetText": "科目：固定资产",
                }, {
                "asset": "减：累计折旧",
                "assetRow": "4",
                "endBalance": "0",
                "initBalance": "0",
                "id": "4",
                "assetText": "科目：累计折旧"
                }, {
                "asset": "固定资产账面价值",
                "assetRow": "5",
                "endBalance": "0",
                "initBalance": "0",
                "id": "5",
                "assetText": "行次：行18-行19",
                }, {
                "asset": "在建工程",
                "assetRow": "6",
                "endBalance": "0",
                "initBalance": "0",
                "id": "6",
                "assetText": "科目：在建工程",
                }, {
                "asset": "工程物资",
                "assetRow": "7",
                "endBalance": "0",
                "initBalance": "0",
                "id": "7",
                "assetText": "科目：工程物资"
                }, {
                "asset": "固定资产清理",
                "assetRow": "8",
                "endBalance": "0",
                "initBalance": "0",
                "id": "8",
                "assetText": "科目：固定资产清理"
                }, {
                "asset": "生产性生物资产",
                "assetRow": "9",
                "endBalance": "0",
                "initBalance": "0",
                "id": "9",
                "assetText": "科目：生产性生物资产-生产性生物资产累计折旧"
                }, {
                "asset": "无形资产",
                "assetRow": "10",
                "endBalance": "0",
                "initBalance": "0",
                "id": "10",
                "assetText": "科目：无形资产-累计摊销"
                }, {
                "asset": "开发支出",
                "assetRow": "11",
                "endBalance": "0",
                "initBalance": "0",
                "id": "11",
                "assetText": "科目：研发支出",
                }, {
                "asset": "长期待摊费用",
                "assetRow": "12",
                "endBalance": "0",
                "initBalance": "0",
                "id": "12",
                "assetText": "科目：长期待摊费用"
                }, {
                "asset": "其他非流动资产",
                "assetRow": "13",
                "endBalance": "0",
                "initBalance": "0",
                "id": "13",
                "assetText": "科目：待处理非流动资产损益"
                }, {
                "asset": "非流动资产合计",
                "assetRow": "14",
                "endBalance": "0",
                "initBalance": "0",
                "id": "14",
                "assetText": "行次：行16+行17+行20+行21+行22+行23+行24+行25+行26+行27+行28"
                }, {
                "asset": "资产总计",
                "assetRow": "15",
                "endBalance": "0",
                "initBalance": "0",
                "id": "15",
                "assetText": "行次：行15+行29"
            }],
            currentLiabilities: [{
            "asset": "短期借款",
            "assetRow": "1",
            "endBalance": "0",
            "initBalance": "0",
            "id": "1",
            "assetText": "科目：短期借款",
            }, {
            "asset": "应付票据",
            "assetRow": "2",
            "endBalance": "0",
            "initBalance": "0",
            "id": "2",
            "assetText": "科目：应付票据"
            }, {
            "asset": "应付账款",
            "assetRow": "3",
            "endBalance": "0",
            "initBalance": "0",
            "id": "3",
            "assetText": "科目：应付账款+预付账款",
            }, {
            "assetRow": "4",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "预收账款",
            "id": "4",
            "assetText": "科目：应收账款+预收账款",
            }, {
            "assetRow": "5",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "应付职工薪酬",
            "id": "5",
            "assetText": "科目：应付职工薪酬",
            }, {
            "assetRow": "6",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "应交税费",
            "id": "6",
            "assetText": "科目：应交税费",
            }, {
            "assetRow": "7",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "应付利息",
            "id": "7",
            "assetText": "科目：应付利息",
            }, {
            "assetRow": "8",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "应付利润",
            "id": "8",
            "assetText": "科目：应付利润",
            }, {
            "assetRow": "9",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "其他应付款",
            "id": "9",
            "assistantNo": null
            }, {
            "assetRow": "14",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "其他流动负债",
            "id": "10",
            "assetText": null,
            }, {
            "assetRow": "15",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "流动负债合计",
            "id": "11",
            "assetText": "行次：行31+行32+行33+行34+行35+行36+行37+行38+行39+行40",
            }],
            nonCurrentLiabilities: [{
            "assetRow": "1",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "长期借款",
            "id": "1",
            "assetText": "科目：长期借款",
            }, {
            "assetRow": "2",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "长期应付款",
            "id": "2",
            "assetText": "科目：长期应付款",
            }, {
            "assetRow": "3",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "递延收益",
            "id": "3",
            "assetText": "科目：递延收益",
            }, {
            "assetRow": "4",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "其他非流动负债",
            "id": "4",
            "assetText": null,
            }, {
            "assetRow": "5",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "非流动负债合计",
            "id": "5",
            "assetText": "行次：行42+行43+行44+行45",
            }, {
            "assetRow": "6",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "负债合计",
            "id": "6",
            "assetText": "行次：行41+行46",
            }],
            ownerasset: [{
            "assetRow": "1",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "实收资本（或股本）",
            "id": "1",
            "assetText": "科目：实收资本",
            }, {
            "assetRow": "2",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "资本公积",
            "id": "2",
            "assetText": "科目：资本公积",
            }, {
            "assetRow": "3",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "盈余公积",
            "id": "3",
            "assetText": "科目：盈余公积",
            }, {
            "assetRow": "4",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "未分配利润",
            "id": "4",
            "assetText": "科目：利润分配+本年利润",
            }, {
            "assetRow": "5",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "所有者权益（或股东权益）合计",
            "id": "5",
            "assetText": "行次：行48+行49+行50+行51",
            }, {
            "assetRow": "6",
            "endBalance": "0",
            "initBalance": "0",
            "asset": "负债和所有者权益（或股东权益）总计",
            "id": "6",
            "assetText": "行次：行47+行52",
            }],
        }
    },
    created(){
        let platform = weex.config.env.platform;
        this.web = platform.toLowerCase()!=='web'?false:true;
    },
    methods:{
        getUrl(param){
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl); 
            let platform = weex.config.env.platform;
            var nativeBase;  
            var native;   

            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
            native = nativeBase.replace('components/','') + 'assets/' + param;
            
            return native;  
        },
        back(){
            var navigator = weex.requireModule('navigator')
            navigator.pop()
        },
        swich(){
            if (this.chartOrform){
                this.chartOrform = false;
                this.fixedText = '图表'
            }else{
                this.chartOrform = true;
                this.fixedText = '列表'
            }
        },
        openChild(index){
            this.chartList[index].lock = !this.chartList[index].lock;
        }
    }
    
}
</script>

<style scoped>
.wrapper{
    background-color: #f5f5f5;
}
.header{
    height: 90px;
    width: 750px;
    background-color: #ffffff;
}
.header-text{
    height: 90px;
    line-height: 90px;
    text-align: center;
}
.back-area{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 20px;
    align-items: center;
    justify-content: center;
}
.back{
    width: 30px;
    height: 30px;
}
.main{
    flex: 1;
}
.chart{
    height: 560px;
    width: 750px;
    background-color: #f5f5f5;
}
.chart_text{
    text-align: center;
    font-size: 26px;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    color: #686868;
}
.asset_items{
  height: 80px;
  background-color: #ffffff;
  padding-left: 30px;
  border-bottom-width: 2px;
  border-bottom-color:  #ededed; 
  align-items: center;
  flex-direction: row;
}
.asset{
  width: 260px;
  font-size: 26px;
  color: #4f525b;
}
.balance{
  flex: 1;
  font-size: 24px;
  text-align: right; 
  color: #4f525b;
}
.arrowDiv{
    height: 80px;
    width: 80px;
    align-items: center;
    justify-content: center;
}
.open_arrow{
  width: 40px;
  height: 40px;
} 
.asset_items_child{
  margin-left: 60px;
}




.fixed_button{
  position: fixed;
  right: 0;
  top: 850px;
  width: 110px;
  height: 90px;
  background-color: #42c5e1;
  border-bottom-left-radius: 45px;
  border-top-left-radius: 45px;
}
.fixed_img{
  width: 50px;
  height: 50px;
  border-radius:25px;
  position: absolute;
  left: 16px;
  top: 20px; 
}
.fixed_text{
  position: absolute;
  right: 15px;
  width: 20px;
  height: 90px;
  font-size: 20px;
  line-height: 25px;
  padding-top: 20px;
  color: #ffffff;
}






.title{
  height:70px;
  background-color: #ffffff;
}
.titleText{
    flex: 1;
    height:70px;
    text-align:center;
    font-size:34px;
    line-height:70px;
    font-weight: bold;
}
.button{
  position: absolute;
  right: 20px;
  top: 8px;
  text-align:center;
  width: 100px;
  height: 54px;
  line-height:54px;
  font-size:28px;
  border-radius: 5px;
  background-color: #94cf28;
  color: #ffffff;
}

.group{
  border-top-width: 2px;
  border-top-color: #dddddd; 
  margin-bottom: 20px;
}

.item{
  height: 70px;
  border-bottom-width: 2px;
  border-bottom-color: #dddddd; 
  background-color: #ffffff;
  flex-direction: row;
  align-items: center;
}
.item-h1{
  background-color: #3ac7d9;
  margin-bottom: 20px;
}
.item-h1-text{
    color: #ffffff;
    padding-left: 20px;
    font-size: 26px;
    font-weight: bold;
}
.item-title{
  background-color: #defcfe;
}
.row{
    flex: 1;
    padding-left:20px; 
    color: #5c5c5c;
    font-size: 26px;
}
.rightBold{
    flex: 1;
    text-align: right;
    font-weight: bold;
    color: #5c5c5c;
    font-size: 26px;
    padding-right:20px; 
}
.red{
  color: #FF0000;
}
</style>
